<template>
	<view style="padding: 10px;">
		<!-- 注意，如果需要兼容微信小程序，最好通过setRules方法设置rules规则 -->
		<u--form
				labelPosition="left"
				:model="form"
				ref="uForm"
				labelWidth="70"
		>
			<u-form-item
					label="手机号:"
					prop="form.userInfo.username"
					borderBottom
			>
				<u--input
						v-model="form.userInfo.username"
						border="none"
						placeholder="请输入手机号"
				></u--input>
			</u-form-item>
			<u-form-item
					label="密码:"
					prop="userInfo.name"
					borderBottom
					v-if="!useCode"
			>
				<u--input
						placeholder="请输入密码"
						password="true"
						v-model="form.userInfo.password"
						border="none"
						
				></u--input>
			</u-form-item>
			<u-form-item
					label="验证码:"
					prop="form.vcode"
					borderBottom
					v-else
			>
				<view>
					<!-- 注意：由于兼容性差异，如果需要使用前后插槽，nvue下需使用u--input，非nvue下需使用u-input -->
					<!-- #ifndef APP-NVUE -->
					<u-input border="none" v-model="form.code" placeholder="请输入验证码">
					<!-- #endif -->
					<!-- #ifdef APP-NVUE -->
					<u--input border="none" v-model="form.code" placeholder="请输入验证码">
					<!-- #endif -->
						<template slot="suffix">
							<u-code
								ref="uCode"
								@change="codeChange"
								seconds="20"
								changeText="X秒重新获取"
							></u-code>
							<u-button
								@tap="getCode"
								:text="tips"
								type="success"
								size="mini"
							></u-button>
						</template>
					<!-- #ifndef APP-NVUE -->
					</u-input v-model="form.code">
					<!-- #endif -->
					<!-- #ifdef APP-NVUE -->
					</u--input v-model="form.code">
					<!-- #endif -->
				</view>
			</u-form-item>
			<view style="margin-bottom: 3px;margin-top: 3px;">
				<u-button @click="switchClick" type="error"  :text="bText"></u-button>
			</view>
			<u-button @click="loginClick" type="primary" text="登录"></u-button>
			<u--text type="error" text="注意:没有注册可以使用验证码登录,使用验证码登录后会直接注册"></u--text>
		</u--form>
	</view>
</template>

<script>
import {loginBycode,getCode,login} from "@/api/index.js"
export default {
	data() {
		return {
			form: {
				userInfo: {
					username: 'liyedong',
					password: '',
				},
				code:null
			},
			useCode:false,
			bText:'使用验证码登录',
			 tips: '',
		};
	},
	methods: {
		switchClick(){
			this.useCode=!this.useCode;
			if(this.useCode){
				this.bText='使用密码登录';
			}else{
				this.bText='使用验证码登录';
			}
		},
		 codeChange(text) {
			this.tips = text;
		  },
		getCode() {
		if (this.$refs.uCode.canGetCode) {
		  uni.showLoading({
			title: '正在获取验证码'
		  });
		  getCode({
			  username:this.form.userInfo.username,
			  }).then(res=>{
			  uni.hideLoading();
			  if(res.code==="0"){
				  uni.showToast({
				  	title:'验证码:'+res.data,
				  	icon:'success',
					duration:3000
				  })
			  }
			}).catch(res=>{
				uni.hideLoading();
				uni.showToast({
					title:res.data,
					icon:'error'
				})
			})
			// 通知验证码组件内部开始倒计时
			this.$refs.uCode.start();
		  } else {
			  uni.showToast({
				title:'倒计时结束再发送',
				icon:'error'
			  })
			}
		},
		change(e) {
		console.log('change', e);
		},
		loginClick(){
			if(this.useCode){
				loginBycode({
					username:this.form.userInfo.username,
					code:this.form.code
				}).then(res=>{
					if(res.code==="0"){
						uni.setStorageSync("token",res.data);
						uni.showToast({
							title:'登录成功',
							icon:'success'
						})
						uni.switchTab({
							url:'/pages/home/home'
						})
					}
				})
			}else{
				login(this.form.userInfo).then(res=>{
					if(res.code==="0"){
						uni.setStorageSync("token",res.data)
						uni.showToast({
							title:'登录成功',
							icon:'success'
						})
						uni.switchTab({
							url:'/pages/home/home'
						})
					}
				})
			}
		}
	},

};
</script>
